<template>
	<!-- 用户管理 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<v-btn class="ml-2" small tile color="primary" @click="editUserDialog=true,userModel={}">
					创建用户
				</v-btn>
				<v-btn class="ml-2" small tile color="primary" @click="setUserDepartmentClick">
					分配部门
				</v-btn>
				<v-btn class="ml-2" small tile color="primary" @click="setUserAccountBookClick">
					分配账套
				</v-btn>
				<v-btn class="ml-2" small tile color="primary" @click="setUserRoleClick">
					分配角色
				</v-btn>

				<v-divider class="mx-4" inset vertical></v-divider>

				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="用户真实姓名" v-model="userQuery.realname" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="用户工号" v-model="userQuery.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="用户登录账号" v-model="userQuery.name" dense outlined>
						</v-text-field>
					</v-col>
					<v-col>
						<v-btn color="primary" @click="search">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshApps">
							刷新</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-data-table :headers="userHeaderList" :items="userDataList" small fixed-header item-key="id" dense
				show-select class="text-no-wrap" loading-text="正在加载请稍等......" :loading="userLoading"
				:options.sync="userOptions" :footer-props="vuetifyDefaultPage" :server-items-length="userTotalCount"
				show-expand single-expand @item-expanded="expandedUserItemEvent" @input="multiSelectUserEvent">

				<template v-slot:item.bpsnperson="{ item }">
					<a v-if="item.bpsnperson" style="color: #67C23A;">是</a>
					<a v-else>否</a>
				</template>
				<template v-slot:item.isonline="{ item }">
					<a v-if="item.isonline" style="color: #67C23A;">在线</a>
					<a v-else>离线</a>
				</template>
				<template v-slot:item.isresponsible="{ item }">
					<a v-if="item.isresponsible" style="color: #67C23A;">是责任人</a>
					<a v-else>否</a>
				</template>
				<template v-slot:item.actions="{ item }">
					<div>
						<!-- <v-btn class="ml-2" small tile color="primary" @click="setUserSingleActionClick(item)">
							分配单独权限
						</v-btn> -->
						<v-btn class="ml-2" small tile color="primary"
							@click="editUserDialog=true,userModel=item,callBackSetSelectDepartmentId(item.departmentid)">
							编辑
						</v-btn>
						<v-btn class="ml-2" small tile color="primary" @click="restPassword(item)">
							密码重置
						</v-btn>
						<v-btn class="ml-2" small tile color="red" @click="setUserOffLine(item)">
							强制下线
						</v-btn>
						<v-btn class="ml-2" small tile color="red" :disabled="item.name=='admin'"
							@click="deleteUserClick(item)">
							删除
						</v-btn>
					</div>
				</template>
				<template v-slot:expanded-item="{ headers, item }">
					<td :colspan="headers.length">
						<v-row class="mt-2">
							<v-col cols="12" sm="3" md="4">
								<v-alert text color="blue-grey" class="text-center">用户拥有账套</v-alert>
								<v-virtual-scroll :items="item.accountingbookList" height="300" item-height="64">
									<template v-slot:default="{ item }">
										<v-list-item :key="item.id">
											<v-list-item-action>
												<v-btn small depressed color="green lighten-5">
													{{ item.id }}
												</v-btn>
											</v-list-item-action>

											<v-list-item-content>
												<v-list-item-title>
													{{ item.code }}
												</v-list-item-title>
											</v-list-item-content>

											<v-list-item-content>
												<v-list-item-title>
													{{ item.name }}
												</v-list-item-title>
											</v-list-item-content>

											<v-list-item-action>
												<v-icon small>
													mdi-open-in-new
												</v-icon>
											</v-list-item-action>
										</v-list-item>

										<v-divider></v-divider>
									</template>
								</v-virtual-scroll>
							</v-col>
							<v-col cols="12" sm="3" md="4">
								<v-alert text color="blue-grey" class="text-center">用户当前账套拥有的角色</v-alert>
								<v-virtual-scroll :items="item.roleList" height="300" item-height="64">
									<template v-slot:default="{ item }">
										<v-list-item :key="item.id">
											<v-list-item-action>
												<v-btn small depressed color="green lighten-5">
													{{ item.id }}
												</v-btn>
											</v-list-item-action>
											<v-list-item-content>
												<v-list-item-title>
													{{ item.accountingbookcode }}
												</v-list-item-title>
											</v-list-item-content>
											<v-list-item-content>
												<v-list-item-title>
													{{ item.code }}
												</v-list-item-title>
											</v-list-item-content>

											<v-list-item-content>
												<v-list-item-title>
													{{ item.name }}
												</v-list-item-title>
											</v-list-item-content>

											<v-list-item-action>
												<v-icon small>
													mdi-open-in-new
												</v-icon>
											</v-list-item-action>
										</v-list-item>

										<v-divider></v-divider>
									</template>
								</v-virtual-scroll>

							</v-col>
							<v-col cols="12" sm="3" md="4">
								<v-alert text color="blue-grey" class="text-center">用户当前账套拥有的权限</v-alert>
								<v-text-field v-model="searchUserAllAction" label="搜索"></v-text-field>
								<v-data-table v-if="item.allActionList!=null" :headers="[
									{text: '权限所属平台',
									 value: 'site',
									 align:'center',
									 	filterable: true,
									},
									{text: '权限名称',
									 value: 'name',
									 align:'center',
									 	filterable: true,
									},
									{text: '所属分类',
						       value: 'controllerdescription',
						       align:'center',
									 filterable: true,
									},
									{text: '类型',
						       value: 'apitypename',
						       align:'center',
									 filterable: true,
									 }
									]" :search="searchUserAllAction" :items="item.allActionList" small fixed-header item-key="id" dense
									class="text-no-wrap" :footer-props="vuetifyDefaultPage">
								</v-data-table>
							</v-col>

							</v-col>
						</v-row>
						</v-row>
					</td>
				</template>

			</v-data-table>
		</v-card>

		<v-dialog v-model="editUserDialog" width="700">
			<v-card>
				<v-card-title>编辑用户</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12">
							<v-alert text color="blue-grey">新创建的用户默认密码为：123456</v-alert>
						</v-col>
						<v-col cols="6">
							<v-text-field label="用户真实姓名(必填)" v-model="userModel.realname" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="用户工号(必填)" v-model="userModel.code" :disabled="userModel.id!==undefined"
								dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="用户登录账号(必填)" v-model="userModel.name"
								:disabled="userModel.id!==undefined" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-select label="性别(必填)" v-model="userModel.sex" :items="sexItems" dense>
							</v-select>
						</v-col>
						<v-col cols="6">
							<v-select label="人员类别(必填)" v-model="userModel.rpersontype" :items="userTypeItems" dense>
							</v-select>
						</v-col>

						<v-col cols="6">
							<v-select label="证件类型" v-model="userModel.ridtype" :items="ridtypeItems" dense>
							</v-select>
						</v-col>
						<v-col cols="6">
							<v-select label="雇佣状态" v-model="userModel.remploystate" :items="remploystateItems" dense>
							</v-select>
						</v-col>
						<v-col cols="6">
							<v-text-field label="邮箱" v-model="userModel.email" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field label="手机号" v-model="userModel.phonenumber" dense>
							</v-text-field>
						</v-col>
						<v-col cols="6">
							<v-text-field password label="备注" v-model="userModel.description" dense>
							</v-text-field>
						</v-col>
						<v-col cols="12">
							<v-row>
								<v-col cols="10">
									<v-text-field label="部门" v-model="selectDepartmentid" dense disabled>
									</v-text-field>
								</v-col>
								<v-col cols="2" md="2">
									<v-btn color="primary" small tile :disabled="userModel.id!==undefined"
										@click="createUserSetDepartmentClick">分配部门</v-btn>
								</v-col>
							</v-row>
						</v-col>

						<v-col cols="6">
							<v-checkbox v-model="userModel.isresponsible" label="是否是责任人" dense></v-checkbox>
						</v-col>
						<v-col cols="6">
							<v-checkbox v-model="userModel.bpsnperson" label="是否业务员" dense></v-checkbox>
						</v-col>
						<v-col cols="12" v-if="userModel.bpsnperson==1">
							<v-row>
								<v-col cols="10" md="9">
									<v-text-field :style="this.tempdetpartid" v-model="userModel.ywdepmentId"
										label="业务或费用部门(必填)" dense></v-text-field>
								</v-col>
								<v-col cols="2" md="3">
									<v-btn color="primary" small tile @click="createUserSetYWYDepartmentClick">选择业务或费用部门
									</v-btn>
								</v-col>
							</v-row>
						</v-col>

					</v-row>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" class="mr-4" text @click="editUserSubmit">确认</v-btn>
					<v-btn color="warning" class="mr-4" text @click="close">取消</v-btn>

				</v-card-actions>
			</v-card>
		</v-dialog>
		<!-- 分配行政部门 -->
		<setdepartment :setDepartmentModel="setDepartmentModel"
			:callBackSetSelectDepartmentId="callBackSetSelectDepartmentId" :callBackLoadUsers="callBackLoadUsers">
		</setdepartment>
		<!-- 分配业务部门 -->
		<setdepartment :setDepartmentModel="setYWYDepartmentModel"
			:callBackSetSelectDepartmentId="callBackSetSelectYWYDepartmenttId" :callBackLoadUsers="callBackLoadUsers">
		</setdepartment>
		<setaccountbook :setAccountBookModel="setAccountBookModel" :callBackLoadUsers="callBackLoadUsers">
		</setaccountbook>
		<setrole :setRoleModel="setRoleModel" :callBackLoadUsers="callBackLoadUsers"></setrole>

	</div>
</template>

<script>
	import setdepartment from './components/user_manager/set_department.vue'
	import setaccountbook from './components/user_manager/set_accountbook.vue'
	import setrole from './components/user_manager/set_role.vue'
	export default {
		name: 'user_manager',
		components: {
			setdepartment,
			setaccountbook,
			setrole
		},
		data: () => ({
			remploystateItems: [{
				text: '在职',
				value: 10
			}, {
				text: '离退',
				value: 20
			}, {
				text: '离职',
				value: 30
			}],
			sexItems: [{
				text: '男',
				value: 1
			}, {
				text: '女',
				value: 2
			}, {
				text: '未知',
				value: 9
			}],
			ridtypeItems: [{
					text: '身份证',
					value: 0
				}, {
					text: '护照',
					value: 1
				}, {
					text: '军人证',
					value: 2
				}, {
					text: '港澳身份证',
					value: 3
				},
				{
					text: '台胞证',
					value: 4
				}, {
					text: '其他',
					value: 9
				}
			],
			userTypeItems: [],
			userQuery: {
				realname: '',
				code: '',
				name: '',
			},
			userHeaderList: [{
					text: '操作',
					align: 'center',
					value: 'actions',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '是否在线',
					align: 'center',
					value: 'isonline',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '当前登录账套',
					align: 'center',
					value: 'accountingbookcode',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '用户工号',
					align: 'center',
					value: 'code',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '用户登录账号',
					align: 'center',
					value: 'name',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '用户真实姓名',
					align: 'center',
					value: 'realname',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '当前账套所属部门',
					align: 'center',
					value: 'userDepartAccbook.department.name',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '手机',
					align: 'center',
					value: 'phonenumber',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '邮箱',
					align: 'center',
					value: 'email',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '是否责任人',
					align: 'center',
					value: 'isresponsible',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '是否业务员',
					align: 'center',
					value: 'bpsnperson',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '业务费用部门',
					align: 'center',
					value: 'userDepartAccbook.ywdepartmentname',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '备注',
					align: 'center',
					value: 'description',
					filterable: false,
					class: 'fixed'
				},
			],
			userDataList: [],
			userTotalCount: 0,
			userLoading: true,
			userOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			editUserDialog: false,
			selectDepartmentid: 0,
			userModel: {},
			searchUserAllAction: '',
			currentSelectUserIdList: [],
			//分配部门对话框
			setDepartmentModel: {
				departmentDialog: false,
				userIdList: [],
				getSelectDepartmentDialog: false
			},
			//分配业务部门对话框
			setYWYDepartmentModel: {
				departmentDialog: false,
				userIdList: [],
				getSelectDepartmentDialog: false
			},
			//分配账套对话框
			setAccountBookModel: {
				showDialog: false,
				userIdList: []
			},
			//角色分配对话框
			setRoleModel: {
				showDialog: false,
				userIdList: []
			},
			tempdetpartid: 0,
		}),
		watch: {
			userOptions: {
				handler() {
					this.search()
				},
				deep: true
			},
		},
		created() {
			this.loadUserTypeItems()

		},
		methods: {

			async loadUserTypeItems() {
				var response = await this.$httpRequest({
					url: `SPM/User/GetUserTypes`,
					method: 'get',
				})
				if (response.status == 1) {
					this.userTypeItems = response.data
				}
			},
			async search() {
				this.userLoading = true
				var response = await this.$httpRequest({
					url: `SPM/User/LoadPage?realname=${this.userQuery.realname}&code=${this.userQuery.code}&name=${this.userQuery.name}&
						pageNumber=${this.userOptions.page}&
						pageSize=${this.userOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.userDataList = response.data.result
					this.userTotalCount = response.data.pagination.totalRecords
					this.userLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async expandedUserItemEvent(exp) {
				if (!exp.value) {
					return
				}

				var response = await this.$httpRequest({
					url: `SPM/User/GetUserWithAllNavigation?userId=${exp.item.id}`,
					method: 'get',
				})
				if (response.status == 1) {
					exp.item.accountingbookList = response.data.accountingbookList
					exp.item.roleList = response.data.roleList
					// exp.item.userDepartAccbookList = response.data.userDepartAccbookList
					if (response.data.allActionList == null) {
						exp.item.allActionList = []
					} else {
						exp.item.allActionList = response.data.allActionList
					}
				}

			},
			refreshApps() {
				this.userQuery.realname = ''
				this.userQuery.code = ''
				this.userQuery.name = ''
				this.search()
			},
			//选中多个用户
			multiSelectUserEvent(multile) {
				if (multile.length <= 0)
					return
				this.currentSelectUserIdList = multile.map(r => {
					return r.id
				})
			},
			callBackLoadUsers() {
				this.search()
			},
			//分配部门
			setUserDepartmentClick() {
				if (this.currentSelectUserIdList.length <= 0) {
					this.$message.warning('请选中需要分配的用户！')
					return
				}
				this.setDepartmentModel.getSelectDepartmentDialog=false
				this.setDepartmentModel.departmentDialog = true
				this.setDepartmentModel.userIdList = this.currentSelectUserIdList
			},
			//分配账套
			setUserAccountBookClick() {
				if (this.currentSelectUserIdList.length <= 0) {
					this.$message.warning('请选中需要分配的用户！')
					return
				}
				this.setAccountBookModel.showDialog = true
				this.setAccountBookModel.userIdList = this.currentSelectUserIdList
			},
			//分配角色
			setUserRoleClick() {
				if (this.currentSelectUserIdList.length <= 0) {
					this.$message.warning('请选中需要分配的用户！')
					return
				}
				this.setRoleModel.showDialog = true
				this.setRoleModel.userIdList = this.currentSelectUserIdList
			},
			//分配单独权限
			setUserSingleActionClick(user) {

			},
			//创建用户时直接分配部门
			createUserSetDepartmentClick() {
				this.setDepartmentModel.departmentDialog = true
				this.setDepartmentModel.getSelectDepartmentDialog = true
			},
			callBackSetSelectDepartmentId(depmentId) {
				this.selectDepartmentid = depmentId
				this.userModel.departmentid = depmentId
				if (this.userModel.userDepartAccbook != null)
					this.userModel.ywdepmentId = this.userModel.userDepartAccbook.ywdepartmentid
			},

			//选择业务员
			createUserSetYWYDepartmentClick() {
				this.setYWYDepartmentModel.departmentDialog = true
				this.setYWYDepartmentModel.getSelectDepartmentDialog = true
			},
			callBackSetSelectYWYDepartmenttId(depmentId) {
				this.tempdetpartid = depmentId
				this.userModel.ywdepmentId = depmentId
			},
			//提交用户
			async editUserSubmit() {
				var url = ''
				if (this.userModel.id != undefined && this.userModel.id > 0) {
					url = `SPM/User/EditUser`
				} else {
					url = `SPM/User/AddUser`
				}

				var response = await this.$httpRequest({
					url: url,
					method: 'post',
					data: this.userModel
				})

				if (response.status == 1) {
					this.$message.success(response.info)
					this.close()
					await this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			async deleteUserClick(item) {
				var response = await this.$httpRequest({
					url: `SPM/User/DeleteUser/${item.id}`,
					method: 'delete'
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			//强制下线
			async setUserOffLine(item) {
				var response = await this.$httpRequest({
					url: `SPM/User/SetUserOffLine?userId=${item.id}`,
					method: 'get'
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			//重置密码
			async restPassword(item) {
				var response = await this.$httpRequest({
					url: `SPM/User/ResetUserPassword?userId=${item.id}`,
					method: 'get'
				})
				if (response.status == 1) {
					this.$message.success(response.info)
				} else {
					this.$message.error(response.info)
				}
			},
			//关闭用户对话框
			close() {
				this.userModel = {}
				this.editUserDialog = false
			},
		}
	}
</script>
